<template>
  <view :class="['privacy-container', `theme-${currentTheme}`]">
    <scroll-view scroll-y class="content">
      <view class="content-inner">
        <text class="content-text greeting">尊敬的用户：</text>
        <text class="content-text">我们非常重视您的个人信息和隐私保护。在使用本小程序过程中，我们可能会收集以下信息：</text>
        
        <view class="content-item">
          <view class="item-header">
            <text class="item-num">1</text>
            <text class="item-title">您主动提供的信息</text>
          </view>
          <text class="item-detail">包括联系人姓名、关系、生日等您在小程序中输入的信息。</text>
        </view>
        
        <view class="content-item">
          <view class="item-header">
            <text class="item-num">2</text>
            <text class="item-title">使用目的</text>
          </view>
          <text class="item-detail">这些信息仅用于宴禧录记录管理功能的正常使用，所有数据均存储在您的设备本地，不会上传至云端。</text>
        </view>
        
        <view class="content-item">
          <view class="item-header">
            <text class="item-num">3</text>
            <text class="item-title">信息存储</text>
          </view>
          <text class="item-detail">您的数据仅存储在您的设备本地，我们不会将其上传至服务器或与任何第三方共享。</text>
        </view>
        
        <view class="content-item">
          <view class="item-header">
            <text class="item-num">4</text>
            <text class="item-title">信息删除</text>
          </view>
          <text class="item-detail">您可以随时通过小程序提供的功能删除您的联系人或礼簿记录。您也可以卸载小程序来完全删除所有数据。</text>
        </view>
      </view>
    </scroll-view>
    
    <view class="footer" v-if="!hasAgreed">
      <button class="agree-btn" @tap="agreePolicy">我已了解并同意</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useThemeStore } from '@/store/modules/theme';
import useThemeMixin from '@/mixins/themeMixin';

const hasAgreed = ref(false);
const themeStore = useThemeStore();

// 使用主题混入，实现导航栏颜色与主题同步
useThemeMixin();

// 获取当前主题
const currentTheme = computed(() => {
  return themeStore.currentTheme;
});

// 检查是否已同意隐私政策
onMounted(() => {
  try {
    const privacyAgreed = uni.getStorageSync('privacyPolicyAgreed');
    hasAgreed.value = !!privacyAgreed;
  } catch (e) {
    console.error('获取隐私政策状态失败', e);
  }
});

// 同意隐私政策
const agreePolicy = () => {
  try {
    console.log('同意隐私政策');
    uni.setStorageSync('privacyPolicyAgreed', 'true');
    hasAgreed.value = true;
    
    uni.showToast({
      title: '已同意隐私政策',
      icon: 'success',
      duration: 1500
    });
    
    // 延迟返回，让用户看到提示
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (e) {
    console.error('保存隐私政策状态失败', e);
  }
};
</script>

<style lang="scss">
.privacy-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  
  &.theme-wedding {
    --primary-color: #FF4D4F;
    --primary-gradient: linear-gradient(135deg, #ff7875, #ff4d4f);
  }
  
  &.theme-funeral {
    --primary-color: #2c3e50;
    --primary-gradient: linear-gradient(135deg, #34495e, #2c3e50);
  }
  
  &.theme-birthday {
    --primary-color: #FF4D4F;
    --primary-gradient: linear-gradient(135deg, #ff7875, #ff4d4f);
  }
  
  &.theme-graduation {
    --primary-color: #1890FF;
    --primary-gradient: linear-gradient(135deg, #40a9ff, #1890ff);
  }
  
  &.theme-business {
    --primary-color: #722ED1;
    --primary-gradient: linear-gradient(135deg, #9254de, #722ed1);
  }
  
  &.theme-housewarming {
    --primary-color: #52C41A;
    --primary-gradient: linear-gradient(135deg, #73d13d, #52c41a);
  }
  
  &.theme-fullmoon {
    --primary-color: #F759AB;
    --primary-gradient: linear-gradient(135deg, #ff85c0, #f759ab);
  }
  
  &.theme-other {
    --primary-color: #13C2C2;
    --primary-gradient: linear-gradient(135deg, #36cfc9, #13c2c2);
  }
  
  .content {
    flex: 1;
    height: calc(100vh - var(--footer-height, 150rpx));
    
    .content-inner {
      padding: 30rpx;
      
      .content-text {
        font-size: 30rpx;
        color: #333;
        line-height: 1.8;
        margin-bottom: 30rpx;
        display: block;
        
        &.greeting {
          font-weight: bold;
          color: var(--primary-color);
        }
      }
      
      .content-item {
        margin-bottom: 40rpx;
        background-color: #fff;
        border-radius: 12rpx;
        padding: 24rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
        
        .item-header {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .item-num {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40rpx;
            height: 40rpx;
            background: var(--primary-color);
            color: #fff;
            border-radius: 50%;
            font-size: 24rpx;
            margin-right: 16rpx;
          }
          
          .item-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
        }
        
        .item-detail {
          font-size: 28rpx;
          color: #666;
          line-height: 1.8;
          display: block;
          padding-left: 56rpx;
        }
      }
    }
  }
  
  .footer {
    padding: 30rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .agree-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: var(--primary-gradient);
      color: #fff;
      font-size: 32rpx;
      border-radius: 44rpx;
      text-align: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
      
      &:active {
        transform: scale(0.98);
        opacity: 0.9;
      }
    }
  }
}
</style> 